<template>
  <div class="app-container calendar-list-container" element-loading-text="正在导出数据">
    <!-- 插入右侧操作按钮 -->
    <!-- 顶部工具栏：按钮区域 -->
    <div
      class="tabs-toolbar"
      style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;"
    >
      <div></div>
      <!-- 左侧空白可用作标题或其他 -->
      <div>
        <el-button type="primary" @click="saveDraft">保存草稿</el-button>
        <el-button type="success" @click="openDialog">提交审核</el-button>
        <el-dialog
          title="提交审核"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
            <el-form-item label="版本号" prop="version">
              <el-input v-model="form.version" placeholder="请输入版本号" />
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
                <el-option label="立即执行" value="1"></el-option>
                <el-option label="自然切换" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="更改工序" prop="changeProcess">
              <el-input v-model="form.changeProcess" placeholder="请输入更改工序" />
            </el-form-item>
            <el-form-item label="更改原因" prop="changeSouce">
              <el-input v-model="form.changeSouce" placeholder="请输入更改原因" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">提 交</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <el-tabs v-model="activeName" type="card" :before-leave="beforeTabLeave">
      <el-tab-pane label="SOP首页" name="first">
        <SOPhome :list="sop"  @sop="handleSopData" ref="sophomeRef"></SOPhome>
      </el-tab-pane>
      <el-tab-pane label="SOP正文" name="second">
        <SOPmain ref="sopmainRef"></SOPmain>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import SOPhome from "./components/SOPhome";
import SOPmain from "./components/SOPmain";
import { submitReview } from "@/api/processRoute";
export default {
  name: "makeSOP",
  components: { SOPhome, SOPmain },
  data() {
    return {
      dialogVisible: false,
      form: {
        version: "",
        type: "",
        changeProcess: "",
        changeSouce: ""
      },
      rules: {
        version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        changeProcess: [
          { required: true, message: "请输入修改工序", trigger: "blur" }
        ],
        changeSouce: [
          { required: true, message: "请输入修改原因", trigger: "blur" }
        ]
      },
      row: this.$store.state.currentRow,
      sop: {},
      activeName: "first",
      userInfo: this.$store.state.user.userInfo,
      };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => done())
        .catch(() => {});
    },
    async submit() {
      if (!this.sop.id) {
        return this.$message.warning(
          "请选择修改状态，且已经保存的产品的SOP提交审核！！！"
        );
      }
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.dialogVisible = false;
          this.submitAudit();
        } else {
          return false;
        }
      });
    },
    saveDraft() {
      // 保存草稿逻辑
      if (this.activeName === "first") {
        this.$refs.sophomeRef.saveHome();
      } else if (this.activeName === "second") {
        this.$refs.sopmainRef.saveMain();
      }
    },
    // 提交审核
    async submitAudit() {
      this.loadingList = true;
      let query = {
        sopId: this.sop.id,
        version: this.form.version,
        type: this.form.type,
        changeProcess: this.form.changeProcess,
        changeSouce: this.form.changeSouce,
        remark: this.form.remark
      };
      let data = await submitReview(query);
      if (data.code == 1) {
        if (this.activeName === "first") {
          this.$refs.sophomeRef.getData();
        } else if (this.activeName === "second") {
          this.$refs.sopmainRef.getSopItem();
        }
        this.$message({
          type: "success",
          message: "提交成功"
        });
      } else {
        this.$message.error(data.msg);
      }
      this.loadingList = false;
    },
    beforeTabLeave(newTabName, oldTabName) {
      if (newTabName === "second") {
        if (!this.sop.id) {
          this.$message.warning(
            "请先在 SOP首页 填写并选择相关信息,并是已经保存过的"
          );
          return false; // 阻止切换
        }
      }
      // 已有数据才执行
      this.$refs.sopmainRef.cleanProcess();
      this.$refs.sopmainRef.getSopItem();
      this.$refs.sopmainRef.receiveListQuery(this.sop);
      this.$refs.sopmainRef.getProcessByProduceNo();
      this.$refs.sopmainRef.getMaterialBom();
      this.$refs.sopmainRef.getEmsFacility();
      return true;
    },
    handleSopData(data) {
      this.$refs.sopmainRef.receiveListQuery(data);
      this.sop = data;
    }
  },
  // 进入页面获取table信息
  mounted() {
    const queryStr = this.$route.query.sop;
    if (queryStr) {
      try {
        const queryObj = JSON.parse(queryStr);
        this.sop = queryObj;
        this.activeName = "first";
        this.$refs.sophomeRef.receiveListQuery(queryObj);
      } catch (e) {
        console.error("解析 listQuery 失败：", e);
      }
    }
  },
  created() {
  },
  watch: {
  '$route.query.sop'(newVal) {
      if (newVal) {
        try {
          const queryObj = JSON.parse(newVal);
          this.sop = queryObj;
          this.activeName = "first";
          this.$refs.sophomeRef.receiveListQuery(queryObj);
        } catch (e) {
          console.error("解析 listQuery 失败：", e);
        }
      }
    }
  }
};
</script>

<style>
.btn-add {
  margin-bottom: 28px;
}

.ul-item {
  width: 85%;
}
</style>
